<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>复杂的背景图案</title>
  <style>
    .gradient-box {
      width: 300px;
      height: 300px;
      margin: 10px;
      display: inline-block;
      /* background-repeat: no-repeat; */
      outline: 1px solid red;
    }

    .box1 {
      background: white;
      background-image: linear-gradient(90deg, rgba(200,0,0,.5) 50%, transparent 0),
                        linear-gradient(rgba(200,0,0,.5) 50%, transparent 0);
      background-size: 30px 30px;
    }
    .box2 {
      background: #58a;
      background-image: linear-gradient(white 1px, transparent 0),
                        linear-gradient(90deg, white 1px, transparent 0);
      background-size: 30px 30px;
    }
    .box3 {
      background: #58a;
      background-image: linear-gradient(white 2px, transparent 0),
                        linear-gradient(90deg, white 2px, transparent 0),
                        linear-gradient(rgba(255, 255, 255, 0.3) 1px, transparent 0),
                        linear-gradient(90deg, rgba(255, 255, 255, 0.3) 1px, transparent 0);
      background-size: 75px 75px, 75px 75px,
                        15px 15px, 15px 15px;
    }
    .box4 {
      background: #655;
      background-image: radial-gradient(tan 30%, transparent 0),
                        radial-gradient(tan 30%, transparent 0);
      background-size: 30px 30px;
      background-position: 0 0, 15px 15px;
    }
    .box5 {
      background: #eee;
      background-image: linear-gradient(45deg, #ccc 25%, transparent 0),
                        linear-gradient(45deg, transparent 75%, #ccc 0),
                        linear-gradient(45deg, #ccc 25%, transparent 0),
                        linear-gradient(45deg, transparent 75%, #ccc 0);
      background-position: 0 0, 15px 15px, 15px 15px, 30px 30px;
      background-size: 30px 30px;
    }
    .box6 {
      background: #eee;
      background-image: linear-gradient(45deg, rgba(0, 0, 0, 0.25) 25%, transparent 0, transparent 75%, rgba(0, 0, 0, 0.25) 0),
                        linear-gradient(45deg, rgba(0, 0, 0, 0.25) 25%, transparent 0, transparent 75%, rgba(0, 0, 0, 0.25) 0);
      background-position: 0 0, 15px 15px;
      background-size: 30px 30px;
    }

    .box7 {
      background: conic-gradient(red, yellow, lime, aqua, blue, fuchsia, red);
    }
    .box8 {
      background: repeating-conic-gradient(#bbb 0, #bbb 25%, #eee 0, #eee 50%);
      background-size: 30px 30px;
    }
    .box9 {
      background: #eee url('data:image/svg+xml,\
      <svg xmlns="http://www.w3.org/2000/svg" \
      width="100" height="100" \
      fill-opacity=".25">\
      <rect x="50" width="50" height="50" /> \
      <rect y="50" width="50" height="50" /> \
      </svg>');
      background-size: 30px 30px;
    }
  </style>
</head>
<body>
  <div class="gradient-box box1"></div>
  <div class="gradient-box box2"></div>
  <div class="gradient-box box3"></div>
  <div class="gradient-box box4"></div>
  <div class="gradient-box box5"></div>
  <div class="gradient-box box6"></div>
  <div class="gradient-box box7"></div>
  <div class="gradient-box box8"></div>
  <div class="gradient-box box9"></div>
</body>
</html>
